<script setup lang="ts">

  import {inject,ref} from "vue";
  import type {ITodoListService} from '@/Types/ITodoListService'

  const props = defineProps(['item', 'itemIndex'])  //定义了属性，便于传递数据给他
  // defineEmits(['deleteTask'])  //定义了时间，便于通知其他组件

  const todoListService = inject<ITodoListService>('todoListService')!
  const isEditMode = ref(false);
  const newContent = ref("");

  function onEdit(){
    isEditMode.value=true;//在脚本中访问值，需要使用value属性
    newContent.value = props.item.content;
  }

  function  onOk(){
    isEditMode.value = false;
    props.item.content = newContent.value;
  }



</script>

<template>
  <div class = "taskItem">
    <el-checkbox v-model="item.isDone" />
    <template v-if="isEditMode">
      <el-input class="grow" v-model="newContent"/>
      <el-button type="primary" @click = "onOk">确定</el-button>
      <el-button type="danger" @click="isEditMode=false">取消</el-button>
    </template>
    <template v-else>
      <div :class="{isTaskDone: item.isDone} " class="grow">{{item.content}}</div>
      <el-button type ="primary" size ="small" @click="onEdit" >修改</el-button>
      <el-button type="danger" size="small" @click = "todoListService.deleteTask(itemIndex)"><i class="i-ion-trash"></i>删除</el-button>

    </template>

  </div>
</template>

<style scoped>
.taskItem {
  --at-apply: flex p-2 gap-x-2 items-center w-20em  //这个就是transformer的好处，可以用at-apply来加样式，可以对原生样式进行原子化修改。

}

.isTaskDone {
  --at-apply:line-through

}
</style>